import React, { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Space, Input,  Button, message} from 'antd';
import useCaptcha from '@/hooks/useCaptcha';
import { login } from '@/api/login';
import { initLoginBg } from './contants';

import style from './index.module.scss';
import './index.less';

const Login: React.FC = () => {
  const navigate = useNavigate();
  const { captchaRef, getCaptcha } = useCaptcha();
  const [userName, setUserName] = useState('');
  const [password, setPassword] = useState('');
  const [captchaCode, setCaptchaCode] = useState('');
  
  // 账号
  const handleUserName = useCallback(
    (evt: React.ChangeEvent<HTMLInputElement>) => {
      setUserName(evt?.target?.value);
    },
    [userName]
  );

  // 密码
  const handlePassword = useCallback(
    (evt: React.ChangeEvent<HTMLInputElement>) => {
      setPassword(evt?.target?.value);
    },
    [password]
  );

  // 验证码
  const handleCaptchaCode = useCallback(
    (evt: React.ChangeEvent<HTMLInputElement>) => {
      setCaptchaCode(evt?.target?.value);
    },
    [captchaCode]
  );

  // 登录
  const handleLoginUser =  useCallback(
    async () => {
      try {
        const uuid = localStorage.getItem('uuid') || '';
        const data = {
          username: userName,
          password,
          captchaCode,
          uuid
        };
        const { msg, success, token } = await login(data);
        if (success) {
          // 1.提示登录成功
          message.success(msg);
          // 2.保存token
          localStorage.setItem('utils-react-manager-token', token);
          // 3.跳转到首页
          navigate('/home');
          // 4.删除本地保存的uuid
          localStorage.removeItem('uuid');
        }
        else {
          message.warning(msg);
          getCaptcha();
        } 
      } catch (error: any) {
        message.error(error);
      }
    },
    [userName, password, captchaCode, getCaptcha]
  );

  useEffect(
    () => {
      initLoginBg();
      window.onresize = () => {
        initLoginBg();
      }
    },
    []
  );
  return (
    <div className={style.loginPageContainer}>
      {/* 存放背景 */}
      <canvas id="canvas" style={{display:"block"}}></canvas>
      {/* 登录盒子 */}
      <div className={style.loginBox + " loginbox"}>
        {/* 标题部分 */}
        <div className={style.title}>
          <h1>前端React&nbsp;·&nbsp;通用后台系统</h1>
          <p>Strive Everyday</p>
        </div>
        {/* 表单部分 */}
        <div className="form">
          <Space direction="vertical" size="large" style={{ display: 'flex' }}>
            {/* 账号 */}
            <Input placeholder="用户名" onChange={handleUserName} />
            {/* 密码 */}
            <Input.Password placeholder="密码" onChange={handlePassword} />
            {/* 验证码盒子 */}
              <div className='captcha-code-container'>
                {/* 验证码 */}
                <Input placeholder='请输入验证码' onChange={handleCaptchaCode}/>
                <span ref={captchaRef} className='code'></span>
                <span className='loadding' onClick={getCaptcha} >看不清，换一张</span>
              </div>
            <Button type="primary" className="loginBtn" onClick={handleLoginUser} block>登录</Button>
          </Space>
        </div>
      </div>
    </div>
  );
};


export default Login;
